<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input type="number" value="0" v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="级别">
        <el-select v-model="form.level" placeholder="请选择级别">
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="首席讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="form.career"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input type="textarea" v-model="form.intro"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          :action="uploadAction"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="isDisabled" @click="onSubmit">{{
          buttonText
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import teacher from "@/api/edu/teacher";

export default {
  data() {
    return {
      form: {},
      buttonText: "创建",
      isDisabled: false,
      isAdd: true,
      uploadAction: process.env.VUE_APP_BASE_API + "/service_oss/oss/upload",
    };
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id;
      this.getTeacher(id);
      this.isAdd = false;
    } else {
      this.form = {};
    }
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
    },
  },
  methods: {
    onSubmit() {
      this.isDisabled = true;
      if (this.isAdd) {
        teacher.add(this.form).then((response) => {
          this.isDisabled = false;
          this.$message({
            type: "success",
            message: "添加成功",
          });
          this.$router.push({ path: "/teacher/list" });
        });
      } else {
        teacher.updateById(this.form.id, this.form).then((response) => {
          this.isDisabled = false;
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.$router.push({ path: "/teacher/list" });
        });
      }
    },
    getTeacher(id) {
      teacher.getOne(id).then((response) => {
        this.form = response.data.result;
        this.buttonText = "修改";
      });
    },
    // 上传成功之后
    handleAvatarSuccess(res, file) {
      this.form.avatar = res.data.key
      this.form.avatarUrl = res.data.url
    },
    // 上传之前
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
        }
        return isJPG && isLt2M;
      }
  },
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>